@import "variable";
@import "dialog";

body {
  .container {
    width: 990px;
  }

}
.order_head {
  .container {
    padding: 20px 0 10px;
  }
  .logo {
    padding-left: 5px;
    .fl();
    .rel();
    width: 269px;
    img {
      width: 100%;
    }
  }
  .link {
    overflow: hidden;
    display: block;
    .abs();
    width: 100px;
    height: 40px;
    line-height: 99em;
    top: 8px;
    right: 0;
    background: @font_white;
    b {
      display: block;
      .abs();
      width: 100px;
      height: 40px;
      line-height: 99em;
      top: 0;
      right: 0;
      background: url("../img/purchase-icon.png") @font_white no-repeat;
    }
  }
  .stepflex {
    display: block;
    border-top: 5px solid @font_grey;
    text-align: center;
    margin: 30px 0 0;
    .fr();
    dl {
      .fl();
      .rel();
      width: 160px;
      top: -5px;
      border-top: 5px solid @font_grey;
    }
    .s_num {
      .rel();
      margin: -15px auto 0;
      color: @font_white;
      .font-w700();
      width: 23px;
      height: 23px;
      background-image: url("../img/step2013.png");
      line-height: 23px;
    }
    .s_text {
      color: @font_grey;
    }
    s, b {
      width: 5px;
      height: 5px;
      .abs();
      line-height: 0;
      .font-s0();
      top: -5px;
      background-image: url("../img/step2013.png");
      overflow: hidden;
    }
    s {
      left: 0;
    }
    b {
      right: 0;
    }
    .first {
      s {
        background-position: 0 -24px;
        background-color: @font_white;
      }
    }
    .done {
      border-top-color: @green;
      .s_num {
        background-position: -46px 0;
      }
      .s_text {
        color: @green;
      }
      s {
        background-position: -46px -24px;
      }
      b {
        background-position: -51px -24px;
      }
    }
    .doing {
      border-top-color: @doing_green;
      .s_num {
        background-position: -23px 0;
      }
      .s_text {
        color: @doing_green;
      }
      s {
        background: @green;
        background-position: -23px -24px;
      }
      b {
        background-position: -28px -24px;
        background-color: @font_grey;
      }
    }
    .last {
      b {
        background-position: -5px -24px;
        background-color: @font_white;
      }
    }
  }
}

//content
.content {
  padding-bottom: 20px;
  .checkout_title {
    height: 42px;
    line-height: 42px;
    .font-s16();
    font-family: 'microsoft yahei';
    overflow: hidden;
    span {
      .fl();
    }
  }
  .checkout_steps {
    background-color: @font_white;
    padding: 0 20px;
    border: 1px solid @border_grey;
  }
  .step_tit {
    line-height: 40px;
    height: 40px;
    color: @font_grey_3;
    h3 {
      .font-s14();
      height: 40px;
      line-height: 40px;
      .fl();
    }
  }
  .extra_r {
    .fr();
    a {
      color: @link_blue;
    }
  }
  .step_cont {
    margin-bottom: 10px;
  }
  .address {
    overflow: hidden;
    max-height: 168px;
  }
  .address_scrollbar {
    width: 938px;
    .rel();
  }
  .address_cont {
    margin: 0 10px 0 20px;
    overflow: hidden;
  }
  .address_cont.address_off {
    height: 48px;
  }
  .address_item {
    list-style: none;
    height: 30px;
    margin: 6px 0;
    .fl();
    width: 99.8%;
    &:hover {
      background-color: @address_hover;
    }
  }
  .item {
    .fl();
    list-style: none;
    .rel();
    border: 1px solid @border_grey;
    line-height: 18px;
    height: 30px;
    width: 140px;
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    background-color: @font_white;
  }
  .item.item_selected {
    border: 2px solid @price_red;
    padding: 4px 10px;
    b {
      display: block;
      .abs();
      right: 0;
      bottom: 0;
      width: 12px;
      height: 12px;
      overflow: hidden;
      background: url("../img/selected-icon.png") no-repeat;
    }
  }
  .addr_detail {
    .fl();
    height: 30px;
    line-height: 30px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
  }
  .op_btns {
    visibility: hidden;
    .fr();
    text-align: center;
    height: 30px;
    line-height: 30px;
    a {
      margin-right: 10px;
      color: @link_blue;
    }
  }
  .addr_switch {
    height: 28px;
    line-height: 18px;
    padding: 5px 20px;
    cursor: pointer;
    b {
      display: inline-block;
      vertical-align: middle;
      height: 10px;
      line-height: 10px;
      width: 9px;
      margin-left: 5px;
      background: url("../img/addr-i.png") no-repeat 0 0;
    }
  }
  .switch_off b {
    background: url("../img/addr-i.png") no-repeat 0 -10px;
  }
  .hr {
    border-bottom: 1px solid @border_grey;
    height: 0;
    margin-bottom: 10px;
  }
  .payment_list {
    padding: 0 20px 10px;
    ul {
      display: block;
    }
    li {
      .fl();
      cursor: pointer;
      margin-right: 9px;
    }
    .payment_item {
      .fl();
      .rel();
      border: 1px solid @border_grey;
      height: 30px;
      line-height: 18px;
      padding: 5px 24px;
      cursor: pointer;
      &.item_selected {
        border: 2px solid @price_red;
        padding: 4px 23px;
        b {
          display: block;
          .abs();
          right: 0;
          bottom: 0;
          width: 12px;
          height: 12px;
          overflow: hidden;
          background: url("../img/selected-icon.png") no-repeat;
        }
      }
      .qmark_icon {
        //visibility: hidden;
        .abs();
        right: 5px;
        top: 7px;
        width: 13px;
        height: 13px;
        overflow: hidden;
        background: url("../img/qmark02.png") no-repeat;
      }
    }
  }
  .shopping_list {
    .rel();
    .fl();
    width: 100%;
    background: url("../img/shopping-list-bg.jpg") 0 0 repeat-y;
    margin-bottom: 10px;
  }
  .goods_list {
    .fr();
    width: 616px;
    background-color: @shop_bg;
    padding: 10px 0;
  }
  .dis_modes {
    .fl();
    width: 330px;
    padding: 10px 10px 10px 20px;
  }
  .goods_tit {
    height: 24px;
    padding: 0 20px;
    h4 {
      .fl();
      width: 49%;
      line-height: 24px;
      color: @font_dark_grey;
      .font-s12();
    }
  }
  .goods_items {
    padding: 0 20px;
  }
  .goods_suit {
    padding-bottom: 5px;
    .goods_suit_tit {
      overflow: hidden;
      margin: 5px 0;
      span {
        display: inline-block;
        background: @price_red;
        color: @font_white;
        vertical-align: middle;
        padding: 0 7px;
        height: 18px;
        line-height: 18px;
        margin-right: 5px;
      }
    }
  }
  .goods_last {
    border: 0;
  }
  .goods_item {
    border-bottom: 1px solid @font_white;
    padding: 10px 0;
    margin-bottom: 10px;
    color: @font_dark_grey;
  }
  .goods_item_extra {
    border: none;
    margin-bottom: 0;
  }
  .p_img {
    .fl();
    width: 82px;
    height: 82px;
    border: 1px solid @border_grey;
    margin-right: 10px;
    background-color: @font_white;
    img {
      width: 82px;
      height: 82px;
    }
  }
  .goods_msg, .goods_msg_gel {
    .fl();
    width: 482px;
  }
  .p_name {
    .fl();
    width: 49.8%;
    height: 3em;
    line-height: 1.5em;
    overflow: hidden;
    margin-bottom: 10px;
    a {
      color: @font_dark_grey;

    }
  }
  .p_price {
    .fr();
    width: 48.8%;
    margin: 0 0 5px;
    strong {
      width: 100px;
      text-align: right;
      font-family: Verdana;
      color: @price_red;
      display: inline-block;
      vertical-align: middle;

    }
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .p_num {
    width: 70px;
    text-align: right;
  }
  .p_state {
    width: 58px;
    text-align: right;
  }
  .p_weight {
    width: 100px;
    text-align: right;
  }
  .p_icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 5px 0 0;
    overflow: hidden;
    background: url("../img/purchase-icon2.png") no-repeat;
    vertical-align: middle;
  }
  .p_icon_seven {
    background-position: 0 -84px;
  }
  .seven {
    color: @seven;
  }
  .service_items {
    display: block;
    .rel();
    margin-left: 20px;
    margin-right: 20px;
  }
  .service_desc {
    display: inline-block;
    padding-right: 8px;
    width: 388px;
    color: @font_dark_grey;
  }
  .service_price {
    font-family: Verdana;
    color: @price_red;
  }
  .mode_item {
    margin-bottom: 50px;
  }
  .mode_item_tit {
    height: 24px;
    line-height: 20px;
    padding: 2px 0;
    h4 {
      .fl();
      .font-s12();
    }
  }
  .mode_tab_nav {
    margin: 10px 0 20px;
    ul {
      display: block;
      width: 310px;
    }
    li {
      .fl();
      height: 30px;
      line-height: 18px;
      padding: 5px 0;
      width: 145px;
      text-align: center;
      border: 1px solid @border_grey;
      margin-right: 10px;
      .rel();
      cursor: pointer;
      &.curr {
        background: @font_white;
        padding: 4px 0;
        border: 2px solid @price_red;
        b {
          display: block;
          .abs();
          right: 0;
          bottom: 0;
          width: 12px;
          height: 12px;
          overflow: hidden;
          background: url("../img/selected-icon.png") no-repeat;
        }
      }
      span {
        .rel();
        display: inline-block;
      }
    }
  }
  .mode_list {
    li {
      display: block;
      padding: 5px 0;
      line-height: 22px;
      border-bottom: 1px solid @border_grey;
      width: 302px;
    }
    .fore1 {
      .fl();
      width: 270px;
    }
    .fore2 {
      .fr();
      a {
        color: @link_blue;
      }
    }
  }
  .weight_cont {
    .abs();
    text-align: right;
    bottom: 20px;
    right: auto;
    left: 20px;
    .font-w700();
    em {
      font-family: Verdana;
      .font-w400();
      color: @gray_9;
    }
  }
  .no_border_b {
    border-bottom: none !important;
  }
  .order_remarks {
    padding: 10px 0;
    margin-top: 10px;
  }
  .remark_tit {
    line-height: 25px;
    margin-bottom: 5px;
  }
  .remark_cont {
    padding: 0 20px;
    margin-bottom: 5px;
  }
  .invoice_cont {
    padding: 10px 20px;
    line-height: 18px;
    a {
      color: @link_blue;
    }
  }
  .mr10 {
    margin-right: 10px;
  }
  .coupons_use i {
    display: inline-block;
    .fl();
    margin-left: 5px;
    margin-top: 16px;
    width: 14px;
    height: 8px;
    cursor: pointer;

    background: url("../img/arrow-down.png");
  }
  .order_virtual {
    width: 100%;
    height: auto;
    padding-left: 20px;
    //border:1px solid @border_grey;
    .itxt {
      width: 200px;
    }
  }
  .virtual_usedcont {
    height: 37px;
    width: 100%;
    background-color: @f6;
    display: block;
    clear: both;
    margin-top: 15px;
    em {
      color: @price_red;
      margin-left: 5px;
    }
    ul {
      .fl();
      margin: 10px 10px 10px 0;
      color: @gray_9;
    }
    li {
      height: auto;
      width: auto;
      text-align: center;
      .fl();
      display: inline;
      margin: 0 5px;
    }
  }
  .virtual_usedcont_price {
    .fl();
    height: auto;
    margin: 10px 10px 10px 20px;
    .font-w700();
    color: @gray_9;
  }
  .statistic {
    .fr();
    width: 300px;
    margin-bottom: 10px;
    margin-right: 20px;
    li {
      height: 24px;
      line-height: 24px;
      overflow: hidden;
      margin-bottom: 5px;
      zoom: 1;
    }
    span {
      width: 180px;
      margin-right: 20px;
      .fl();
      text-align: right;
    }
    em {
      color: @price_red;
    }
    .price {
      color: @font_grey_3;
      .fl();
      width: 100px;
      text-align: right;
      font-family: Verdana;
    }
  }
  .trade_foot {
    .trade_foot_detail {
      padding: 15px 10px 15px 0;
      line-height: 20px;
      text-align: right;
      border-top: 1px solid @border_grey;
      width: 990px;
      color: @gray_9;
      background-color: @f4;

    }
  }
  .fc_price_info, .fc_address_info {
    margin-right: 10px;
    line-height: 25px;

  }
  .price_num {
    color: @price_red;
    font-family: Verdana;
    .font-w700();
    .font-s18();
    min-width: 122px;
    .fr();
    text-align: right;
  }
  .mr20 {
    margin-right: 20px;
  }
  .checkout_go_pay{
    clear: both;
    width: 990px;
    margin-bottom: 20px;
  }
  .checkout_btn{
    .rel();
    width: 990px;
    height: 50px;
    .inner{
      padding: 0 10px;
    }
    button{
      .fr();
      .rel();
      width:180px;
      height: 36px;
      line-height: 36px;
      margin: 8px 10px 0 0;
      padding: 0;
      background-color: @price_red;
      overflow: hidden;
      color: @font_white;
      .font-w700();
      .font-s16();
      font-family: Arial,'microsoft yahei';
      display: inline-block;
      border-radius: 3px;
      cursor: pointer;
      border: 0;
    }
  }
}


